<!DOCTYPE html>
<html lang="en">
<!-- editor:xxxu -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function setQuestions() {
            document.getElementById("question").innerHTML = '';
            var arrHTML = [
                '行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？',
                '页面导入样式时，使用link和@import有什么区别？',
                'title与h1的区别、b与strong的区别、i与em的区别？',
                'img标签的title和alt有什么区别？',
                'png、jpg、gif 这些图片格式解释一下，分别什么时候用？',
                '怎么让Chrome支持小于12px 的文字？',
                'webkit表单输入框placeholder的颜色值能改变吗？',
                '禁止ios&android长按时下载图片/用户选中文字',
                'html标签中的src和href有什么区别？',
                'HTML5语义化好处?',
                'meta viewport 是做什么用的，怎么写？',
                'HTML 5 有哪些标签？',
                'Canvas和Svg区别是什么',
                '前端需要关注哪些SEO',
                'script标签中defer和async的区别',
                'CSS 如何实现单行/多行文本溢出显示省略号？',
                '禁止ios 长按时触发系统的菜单，ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉,如何关闭iOS键盘首字母自动大写',
                '什么是重绘和回流？两者区别？'
            ];
            var arrCSS = [
                '介绍伪类和伪元素',
                '介绍一下CSS的盒子模型',
                'line-height和height区别(大厂)',
                'CSS选择符有哪些？哪些属性可以继承？',
                'CSS优先级如何计算？',
                '用CSS画一个三角形',
                '一个盒子不给宽度和高度如何水平垂直居中？',
                'display有哪些值？说明他们的作用。',
                '对BFC规范(块级格式化上下文：block formatting context)的理解？',
                '清除浮动有哪些方式？',
                '在网页中的应该使用奇数还是偶数的字体？为什么呢？',
                '有几种定位？分别是根据什么定位的？',
                '写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。',
                '什么是CSS reset？',
                'css sprite是什么,有什么优缺点',
                'display: none;与visibility: hidden;的区别',
                'opacity 和 rgba区别',
                '::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用',
                'rem和em区别',
                '自适应',
                '响应式',
                '必考：如何垂直居中？',
                '必考：flex 怎么用，常用属性有哪些？',
                'flex布局怎么把元素搞到页面四角处',
                '两栏布局',
                'grid(网格)布局',
                'CSS预处理器',
                'CSS3新特性'
            ]
            var arrJS = [
                '延迟加载JS有哪些方式',
                'JS数据类型有哪些？',
                'JS数据类型考题(typeof(undefined + 1,undefined,NaN,null))',
                'null和undefined的区别',
                '==和===有什么不同',
                'JS微任务和宏任务',
                'JS作用域考题(重要)',
                'JS对象考题',
                'JS作用域+this指向+原型 考题',
                'JS判断变量是不是数组，你能写出哪些方法？',
                'slice是干嘛的、splice是否会改变原数组',
                'JS数组去重',
                '找出多维数组最大值',
                '给字符串新增方法实现功能',
                '找出字符串出现最多次数的字符以及次数(高频)',
                'new操作符具体做了什么(高频)',
                '闭包(闭包是什么,解决什么问题,缺点,实际应用)',
                '原型和原型链(解决?谁有?对象查找顺序?)',
                'JS继承有哪些方式',
                '说一下call、apply、bind区别',
                'sort背后原理是什么？',
                '深拷贝和浅拷贝',
                'localstorage、sessionstorage、cookie的区别',
                'var、let、const区别(高频)',
                '作用域考题',
                '将下列对象进行合并',
                '箭头函数和普通函数有什么区别？(高频)',
                'Promise相关(几种状态,解决什么问题,async/await)',
                'find和filter的区别',
                'some和every的区别(大厂)',
                '必考：ES 6 语法知道哪些，分别怎么用？',
                '必考 Promise、Promise.all、Promise.race 分别怎么用？(高频)',
                '必考：立即执行函数是什么？',
                '必考：什么是 JSONP，什么是 CORS，什么是跨域？',
                '什么情况造成跨域,跨域解决方案有哪些,JSONP 的工作原理',
                '常考：async/await 怎么用，如何捕获异常？',
                '常考：如何用正则实现 trim()？',
                '必考：手写函数防抖和函数节流',
                '手写发布订阅',
                '必考：手写AJAX(原生  ajax 请求有几个步骤)',
                '手写promise.all',
                '数组常用方法',
                '字符串操作方法',
                '怎么判断数字是不是素数',
                'promise捕获错误几种方式',
                '异步任务有哪些',
                '点击高亮选项卡和图标跟随鼠标移动实现(pink)',
                '什么是事件冒泡？什么是事件捕获?',
                '阻止默认事件/冒泡事件',
                'this指向相关考题',
                'map和foreach区别',
                'JS判断数据类型的方法',
                'js作用域理解',
                '0.1+0.2!=0.3怎么处理(小数精度处理)'
            ]
            var varVue = [
                '系统自带了八个生命周期,进入执行?,使用keep-alive多出?执行?',
                '谈谈对keep-alive了解?',
                'v-show和v-if是干什么？有什么区别？',
                'v-if和v-for优先级(缺)',
                'ref是什么？',
                'nextTick是什么？',
                'scoped原理',
                'Vue中如何做样式穿透',
                '组件间通信',
                'computed、methods、watch有什么区别？',
                'props和data优先级谁高？',
                'vuex有哪些属性',
                'vuex是单向还是双向数据流',
                'vuex中mutaions 和 actions 区别',
                'vuex如何做持久化存储',
                'slot插槽',
                'Vue路由模式',
                '介绍一下SPA以及SPA有什么缺点？',
                'vue路径传值',
                '路由导航守卫有哪些？',
                'vue动态路由',
                'v-model双向绑定原理&Vue 数据响应式怎么做到的？',
                'diff算法',
                '讲一下MVVM框架',
                'Vue 有哪些生命周期钩子函数？分别有什么用？',
                'Vue.set 是做什么用的？',
                'Vue2如何实现双向绑定?(重复)',
                'Vue3 为什么要用Proxy?',
                'Vue3 为什么要用Composition API?',
                'Vue3 对比 Vue2 有什么改动',
                '说一下自定义指令',
                'vue优点',
                '请说说什么是虚拟 DOM?',
                '子组件与父组件生命周期发生的先后顺序',
                'vue-router 是什么？它有哪些组件？',
                '请说出使用路由模块来实现页面跳转的三种方式',
                '$route和$router的区别是什么',
                'Router的传参方式有哪些，有什么区别',
                'Router的懒加载是如何实现的',
                ' v-for 中为什么使用 key？',
                'vue页面级组件传值',
                'vue钩子函数有哪些',
                'axios拦截器',
                'vue3对比vue2区别,特性,优势'
            ]

            var varOther = [
                '必考：HTTP 状态码知道哪些？分别什么意思？',
                '大公司必考：HTTP 缓存有哪几种？',
                '必考：GET 和 POST 的区别',
                'Cookie VS Session',
                'http和https区别',
                'http/1.1 和http/2区别',
                'tcp三次握手和四次挥手',
                '浏览器地址栏输入 URL 敲下回车后发生了什么',
                '什么是 XSS？如何预防？',
                '必考：什么是 CSRF？如何预防？',
                'SQL注入',
                '必考：有哪些常见 loader 和 plugin，你用过哪些？',
                '英语题：loader 和 plugin 的区别是什么？',
                '必考：如何按需加载代码？',
                '必考：如何提高构建速度？',
                '转义出的文件过大怎么办？',
                '面试题：如何自定义头部？',
                ' 面试题：如何自定义底部？',
                '微信小程序setData数据太大解决方案',
                '微信小程序登录流程是如何的',
                '微信小程序支付流程是如何',
                '微信小程序发布流程是如何的？',
                '微信小程序发布出现什么导致审核不通过的吗',
                '小程序生命周期函数',
                '小程序内的页面跳转',
                'git常用命令',
                'git解决冲突',
                '能不能说一下git fetch和git pull命令之间的区别？',
                '使用过git merge和git rebase吗？它们之间有什么区别？',
                '面试题：GitFlow',
                '加载优化',
                '图片优化',
                '渲染优化',
                '网站前端性能优化',
                'vue优化',
                'vue项目优化',
                '首屏优化(为什么,怎么做)',
                '大数相加(字符串相加)',
                '两数之和',
                '整数排序'
            ]

            var num = prompt('1.HTML   2.CSS   3.JS   4.Vue   5.other');
            if (num == 1) {
                var arr1 = arrHTML;
            } else if (num == 2) {
                var arr1 = arrCSS;
            } else if (num == 3) {
                var arr1 = arrJS;
            } else if (num == 4) {
                var arr1 = varVue
            } else if (num == 5) {
                var arr1 = varOther
            } else {
                alert('请重新输入');
                return
            }
            let count2 = 1;
            arr1.forEach((value, index, array) => {

                array[index] += `&nbsp(${count2})`;
                count2++;
            });
            var count = 1;
            while (arr1.length != 0) {

                var rNum = randomNum(0, arr1.length)
                if (arr1[rNum] === undefined) continue
                console.log(rNum);
                console.log(arr1[rNum]);
                document.getElementById("question").innerHTML += `${count}.&nbsp${arr1[rNum]}<br><br>`;
                arr1.splice(rNum, 1);
                count++;
            }
            // for (let i = 0; i < arr1.length; i++) {
            // }
            console.log(arr1);
        }

        function nextQuestion(arr) {
            arr1
        }

        //生成从minNum到maxNum的随机数
        function randomNum(minNum, maxNum) {
            switch (arguments.length) {
                case 1:
                    return parseInt(Math.random() * minNum + 1, 10);
                    break;
                case 2:
                    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                    break;
                default:
                    return 0;
                    break;
            }
        }

        function setNewQuestions() {
            scrollTo(0, 0);
            setQuestions();

        }

        function setAllQuestions() {

        }
    </script>
    <style>
        div {
            margin: 50px;

        }

        .question {
            /* border: 1px solid black; */
        }
    </style>
</head>

<body>
    <div><button onclick="setQuestions()">点击我出题</button>

        <!-- <button onclick="setAllQuestions()">出所有题目</button></button> -->
    </div>
    <div id="question" class="question"></div>
    <div><button onclick="setNewQuestions()">重新出题</button></div>


</body>

</html>